<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	

</head>
<body>
	<table align="center" border="1px" cellpadding="10px">
		<caption><h1>用户信息表</h1></caption>
		<thead>
			<tr>
			<th>姓名</th>
			<th>年龄</th>
			<th>性别</th>
			<th>邮箱</th>
			<th>操作</th>
			</tr>
		</thead>
		<tbody>
			<tr id="tb">
				<td>张三</td>
				<td>22</td>
				<td>男</td>
				<td>12345@qq.com</td>
				<td><input type="button"  value="删除"></td>
			</tr>
		</tbody>
	</table>
	<hr/>
	<form action="" align='center'>
		<fieldset>
			<legend>信息表</legend>
			<p>
				姓名:<input type="text" name="username" id="username">
			</p>
			<p>
				年龄: <input type="text" name="age" id="age">
			</p>
			<p>
				性别： <input type="radio" name="gender" id="male" value="男" checked />男
					  <input type="radio" name="gender" id="female" value="女" />女
			</p>
			<p>
				Email：<input type="text" name="email" id="email">
			</p>
			
				<input type="button" name="" value="提交" id="btn">
			
			</fieldset>
	</form>
</body>
	<script type="text/javascript">
		function $(id){
			return document.getElementById(id)
		}
		function cr(ele){
			return document.createElement(ele)
		}
		var btn=document.getElementById('btn')
		btn.onclick=function(){
			//获取表单中输入的数据
			var username=$('username').value
			//console.log(username)
			var age=$('age').value;
			var gender=$('male').checked?$('male').value:$('female').value;
			var email=$('email').value;
			//创建存放数据的td
			var tdName=cr('td');
			var tdAge=cr('td');
			var tdGender=cr('td');
			var tdEmail=cr('td');
			//将数据填到td中
			tdName.innerText=username
			tdAge.innerText=age
			tdGender.innerText=gender
			tdEmail.innerText=email
			//创建删除td按钮并绑定删除

			var tdDel=cr('td')
			var delBtn=cr('input')
			delBtn.type='button'
			delBtn.value = '删除';
			delBtn.onclick=function(){
				//this代表事件的触发源
				$('tb').removeChild(this.parentNode.parentNode);
			}
			//将删除按钮添加到td中去
			tdDel.appendChild(delBtn)
			//新建tr
			var tr=cr('tr')
			//将所有的td放到tr中
			tr.appendChild(tdName)
			tr.appendChild(tdAge)
			tr.appendChild(tdGender)
			tr.appendChild(tdEmail)
			tr.appendChild(tdDel)
			//console.log(tr)
			// 将tr添加到tbody中
			$('tb').appendChild(tr);
					}
	</script>
</html>